<!-- 确认订单页面顶部组件 -->
<template>
  <div class="confirm-header">
    <div class="title">
      <i class="iconfont" @click="$router.go(-1)">&#xe604;</i>
      <span class="title-text">确认订单</span>
    </div>
    <div class="address">
      <div class="address-title">收货地址</div>
      <div class="address-department">{{address.department}}&nbsp;&nbsp;&nbsp;{{address.houseNumber}}</div>
      <div class="address-name">{{address.name}}&nbsp;&nbsp;&nbsp;{{address.phone}}</div>
      <div class="address-btn">
        <i class="iconfont">&#xe604;</i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'confirmHeader',
  props:['address']
}
</script>

<style scoped lang="scss">
@import '@/styles/theme.scss';
@import '@/styles/mixin.scss';
.confirm-header{
  height: 140px;
  background-image: linear-gradient(0deg, rgba(0,145,255,0.00) 4%, #0091FF 50%);
  position: relative;
  margin-bottom: 53px;
  .title{
    padding-top: 24.5px;
    text-align: center;
    position: relative;
    margin-bottom: 22px;
    &-text{
      font-size: 16px;
      color: $white;
    }
    .iconfont{
      font-size: 27px;
      color: $white;
      position: absolute;
      left: 18px;
      top: 19px;
    }
  }
  .address{
    margin: 0 18px;
    height: 111px;
    background-color: $white;
    border-radius: 4px;
    padding: 16px;
    position: relative;
    color: $theme-font-color;
    &-title{
      font-size: 16px;
      margin-bottom: 16px;
      font-weight: bold;
    }
    &-department{
      font-size: 14px;
      margin-bottom: 8px;
    }
    &-name{
      font-size: 12px;
      color: #666;
    }
    &-btn{
      position: absolute;
      right: 16px;
      top: 0;
      height: 100%;
      @include item-center;
      .iconfont{
        color: #666666;
        font-size: 20px;
        transform: rotate(180deg);
      }
    }
  }
}
</style>
